<template>
    <div>
        <header-one></header-one>
        <div class="container" style="margin-top: 30px">
            <div style="margin-bottom: 30px">新增患者</div>
            <div>
                <el-form ref="addPtForm" :rules="addFormRules" :model="addPtForm" label-width="100px">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="姓名" prop="ptNm" >
                                <el-input v-model="addPtForm.ptNm" ref="inputptNm" style="width: 100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="性别" prop="ptSex">
                                <el-select v-model="addPtForm.ptSex" ref="inputptSex" placeholder="请选择性别" style="width: 100%">
                                    <el-option key="00" label="男" value="00"></el-option>
                                    <el-option key="01" label="女" value="01"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="证件号码" prop="ptCerNo">
                                <el-input  v-model="addPtForm.ptCerNo"  style="width: 100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="手机号" prop="ptPhone">
                                <el-input v-model="addPtForm.ptPhone" ref="inputptPhone" style="width: 100%;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="出生日期" prop="ptBirth" >
                                <el-date-picker style="width: 100%;" ref="inputptBirth"
                                                v-model="addPtForm.ptBirth"
                                                type="date"
                                                placeholder="选择日期"
                                                value-format="yyyy-MM-dd"
                                                :picker-options="ptBirthOptions">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="年龄" prop="ptAge">
                                <el-input type="number" v-model="addPtForm.ptAge" ref="inputAge" style="width: 100%;"  @keyup.native="proving1"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="家庭住址" prop="ptAddres">
                                <el-input   v-model="addPtForm.ptAddres" ref="inputAddres" style="width: 100%;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

        </div>
        <div style="float: right;margin-top: 30px;margin-right: 30px">
<!--            <el-button @click='queryOne' size="medium" type="success">抽 取</el-button>-->
            <el-button @click='closeAdd' size="medium">取 消</el-button>
            <el-button type="primary" size="medium" @click="saveAdd">确 定</el-button>
        </div>
    </div>
</template>
<script>
    import {doAdd,queryByCerNo} from '../api/patient';
    export default {
        name: 'patient',
        data() {
            return {
                addPtVisible: true,
                addFormRules: {
                    ptNm: [
                        { required: true, message: '请输入患者姓名', trigger: 'blur' },
                    ],
                    ptBirth: [
                        { required: true, message: '请输入患者出生日期', trigger: 'blur' },
                    ],
                    ptAge:[
                        { required: true, message: '请输入患者年龄', trigger: 'blur' },
                    ],
                    ptSex: [
                        { required: true, message: '请选择患者性别', trigger: 'blur' }
                    ],
                    ptPhone:[
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    ptCerNo: [
                        { required: true, message: '请输入证件号码', trigger: 'blur' },
                        // {pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式有误！', trigger: 'blur'}
                    ],
                },
                addPtForm:{
                    ptNm:'',
                    ptSex:'',
                    ptCerNo:'',
                    ptBirth:'',
                    ptAge:'',
                    ptPhone:'',
                    ptAddres:'',
                },
                ptBirthOptions:{
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6;
                    }
                },
            }
        },
        watch: {
            'addPtForm.ptBirth': {
                handler: function () {
                    if (this.addPtForm.ptBirth !== undefined && this.addPtForm.ptBirth !== null && this.addPtForm.ptBirth !== "") {
                        //输入出生日期，自动填充年龄
                        const year = new Date().getFullYear();
                        const ptBirthYear = this.addPtForm.ptBirth.slice(0, 4);
                        this.$refs.inputAge.value = year - ptBirthYear;    // 给有 ref 属性的 input 赋值
                        this.addPtForm.ptAge = year - ptBirthYear;
                    }
                }
            },
        },
        methods:{
            /*新增用户 */
            saveAdd(){
                // validate 函数 表单验证
                this.$refs['addPtForm'].validate((valid) => {
                    if (valid) {
                        console.log("doAdd",this.addPtForm);
                        doAdd(this.addPtForm).then(res => {
                            this.$message.success(res.data);
                            this.$router.push('/patientList');
                            // this.$confirm(res.data+',是否前往训练？', '提示', {
                            //     type: 'warning'
                            // })
                            //     .then(() => {
                            //         //跳转到训练的exe中
                            //         console.log("成功");
                            //         this.$router.push('/train');
                            //     })
                            //     .catch(() => {
                            //         this.$router.push('/patientList');
                            //     });
                        });
                    }
                });
            },
            queryOne(){
                if (this.addPtForm.ptCerNo!==undefined && this.addPtForm.ptCerNo!==""){
                    console.log("身份证号：",this.addPtForm.ptCerNo);
                    /*抽取*/
                    queryByCerNo(this.addPtForm.ptCerNo).then(res => {
                        if (res.success){
                            if(res.data!==null){
                                console.log("res.data",res.data);
                                this.$refs.inputptNm.value = res.data.ptNm;    // 给有 ref 属性的 input 赋值
                                this.addPtForm.ptNm = res.data.ptNm;

                                this.$refs.inputptSex.value = res.data.ptSex;    // 给有 ref 属性的 input 赋值
                                this.addPtForm.ptSex = res.data.ptSex;

                                this.$refs.inputptPhone.value = res.data.ptPhone;    // 给有 ref 属性的 input 赋值
                                this.addPtForm.ptPhone = res.data.ptPhone;

                                this.$refs.inputptBirth.value = res.data.ptBirth;    // 给有 ref 属性的 input 赋值
                                this.addPtForm.ptBirth = res.data.ptBirth;

                                this.$refs.inputAge.value = res.data.ptAge;    // 给有 ref 属性的 input 赋值
                                this.addPtForm.ptAge = res.data.ptAge;

                                this.$refs.inputAddres.value = res.data.ptAddres;    // 给有 ref 属性的 input 赋值
                                this.addPtForm.ptAddres = res.data.ptAddres;
                            }else{
                                this.$message.warning('请患者不存在，请填写患者信息');
                            }
                        }else{
                            this.$message.error('抽取失败');
                        }
                    });
                }else{
                    this.$message.warning('请输入证件号进行抽取');
                }
            },
            closeAdd(){//关闭新增弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.addPtForm={};
                        this.$router.push('/patientList');
                    })
                    .catch(() => {
                        this.$message({
                            message:'已取消操作'
                        });
                    });
            },
            proving1(e) {
                var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
                var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
                if (keynum ==189|| keynum==190||keynum == 109 || keynum == 110) {
                    this.$message.warning('禁止输入小数以及负数,请重新输入');
                    e.target.value = ' ';
                    return;
                }
                if (keynum==69){
                    this.$message.warning('禁止输入e或E');
                    e.target.value = ' ';
                    return;
                }
            },
        }
    }
</script>
<style scoped>
    /deep/ .el-form-item__label {
        line-height: 50px;
        font-size: 16px;
    }
    /deep/ .el-input--small .el-input__inner{
        line-height: 50px;
        height: 50px;
    }
</style>
